<template>
  <div class="table_config_list">
    <div class="search_wrap">
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="表名称：">
          <el-input style="max-width: 180px;" v-model="queryParams.name" placeholder="请输入表名称" @keyup.enter.native="handleSearch"
            @clear="handleSearch" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleOpenDialog('add')">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="card_wrap">
      <div class="card_item" :class="{active: index == idx}" v-for="(item, index) in tableData" :key="index" @click="handleClick(item,index)">
        <div class="info_item">
          <div class="label">表名称：</div>
          <div class="con">{{ item.tableName }}</div>
        </div>
        <div class="info_item">
          <div class="label">配置名称：</div>
          <div class="con">{{ item.name }}</div>
        </div>
        <div class="icon_wrap">
          <el-icon class="icon" :size="24" color="#1890ff" @click.stop="handleOpenDialog('edit', item.id)">
            <Edit />
          </el-icon>
          <el-icon class="icon" :size="24" color="#f56c6c" @click.stop="handleDel(item)">
            <Delete />
          </el-icon>
        </div>

      </div>
    </div>
    <div class="pagination_wrap">
      <AplidPaginate :key="pageKey" :total="total" :current="queryParams.pageParaPO.current" :size="queryParams.pageParaPO.size" :pager-count="7" layout="total, prev, pager, next" @change="handleChange"></AplidPaginate>
    </div>
    <el-dialog v-model="dialogVisible" :title="dialogTitle">
      <TableConfigDialog :key="keyData" ref="tableConfigDialog" :id="id" @update-table="handleUpdateTable">
      </TableConfigDialog>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { Edit, Delete } from '@element-plus/icons-vue'
import { AplidPaginate } from '@/components/AplidCrud';
import TableConfigDialog from './TableConfigDialog.vue'
import api from '@/apiMod/index'
const emit = defineEmits<{
  (e: 'searchMetadataTable', id: string, tableName: string)
}>()
let pageKey = ref(0)
const dialogVisible = ref(false)
const dialogTitle = ref('')
const id = ref('')
const total = ref(0)
const keyData = ref(0)
const idx = ref(0)
const tableConfigDialog = ref(null)
const queryParams = ref({
  pageParaPO: {
    current: 1,
    size: 10
  },
  name: ''
})
const tableData = ref([])
onMounted(() => {
  getList()
})
const handleSearch = () => {
  console.log('knkna',queryParams.value.name)
  if(!queryParams.value.name || queryParams.value.name==''){
    queryParams.value.name = undefined
  }
  queryParams.value.pageParaPO.current = 1
  // queryParams.value.tableName = undefined
  getList()
}
const getList = async () => {
  const res = await api.view_tableConfig_page(queryParams.value)
  total.value = res.data.total
  queryParams.value.pageParaPO.current = res.data.current
  tableData.value = res.data.records
  emit('searchMetadataTable', tableData.value[0].id, tableData.value[0].tableName)
  
}
const handleChange = ({ size, current }) => {
  queryParams.value.pageParaPO.size = size
  queryParams.value.pageParaPO.current = current
  getList()
}
const handleOpenDialog = (type: string, rowId?: string) => {
  keyData.value++
  dialogVisible.value = true
  if (type == 'add') {
    dialogTitle.value = '元数据配置-新增数据'
    id.value = null
    // tableConfigDialog.value.ruleForm.resetFields()
    // console.log(tableConfigDialog.value)
  } else {
    id.value = rowId
    dialogTitle.value = '元数据配置-编辑数据'
  }
}
const handleClick = (row: any, index: number) => {
  // queryParams.value.tableName = undefined
  emit('searchMetadataTable', row.id, row.tableName)
  idx.value = index
}
const handleDel = (row) => {
  ElMessageBox.confirm(
    `确认删除${row.tableName}这条数据吗?`,
    '删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    const res = await api.view_tableConfig_del([row.id])
    if (res.code == 0) {
      ElMessage.success(res.data)
      queryParams.value.name = ''
      queryParams.value.pageParaPO.current = 1
      pageKey.value = Math.random()
      getList()
    }
  }).catch(() => {

  });
}
const handleUpdateTable = () => {
  dialogVisible.value = false
  queryParams.value.pageParaPO.current = 1
  pageKey.value = Math.random()
  getList()
}
</script>

<style lang="scss" scoped>
.table_config_list {
  height: 100%;
  .search_wrap{
    width: 100%;
  }
  .seacard_itemtableNamerch_wrap{
    width:100%;
    .el-form-item:last-child{
      margin-right: 0;
    }
  }
  .card_wrap {
    overflow: auto;
    height: calc(100% - 65px);
    padding: 10px;
    .card_item {
      padding: 10px;
      box-sizing: border-box;
      box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
      margin: 20px 0;
      position: relative;
      border-radius: 8px;
      border: 1px solid #fff;

      .info_item {
        display: flex;
        align-items: center;
        margin: 15px 0;
      }

      .icon_wrap {
        position: absolute;
        top: 5px;
        right: 0;

        .icon {
          cursor: pointer;
        }
      }
      &.active{
        background: #ecf5ff;
        border: 1px solid #c6e2ff;
      }
    }
  }
}

</style>